<template>
	<view>
		<view class="grid u-p-30">
			<template>
				<view v-for="item,idx in list.list" class="u-flex-col item u-col-center u-p-t-14 u-p-b-14 u-row-between" :class="{active: idx + 1 <= list.sign_day}"
					 :key="idx">
					<text class="u-font-30">第{{idx + 1}}天</text>
					<image src="~@/static/task/icon.png" class="icon" mode=""></image>
					<text class="u-font-22 gray" :class="{activeText: idx + 1 <= list.sign_day}">{{item}}积分</text>
				</view>
				<image @click="$navTo('pages/point/index')" class="shopImg" src="../../../static/shop.png" mode="widthFix"></image>
			</template>
		</view>
		<view class="u-p-l-30 u-p-r-30 u-p-b-30">
			<text class="u-m-r-14 u-font-28">积分规则</text>
			<u-icon name="question-circle" size="28"></u-icon>
		</view>
		<view class="" style="padding: 0 30rpx 60rpx">
			{{list.content}}
		</view>
		<!-- <u-modal v-model="showRules" :content="list.content" title="积分规则"></u-modal> -->
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				showRules: false
			}
		}
	}
</script>

<style lang="scss">
	.shopImg{
		width: 180rpx;
	}
	.grid {
		display: grid;
		grid-template-columns: repeat(4, 22%);
		grid-gap: 20upx 24upx;
	}

	.item {
		width: 144upx;
		height: 172upx;
		background: #F4F4F4;
		border-radius: 11upx;
		color: #1C1C1E;

		.gray {
			color: #99999B;
		}
	}

	.icon {
		width: 68upx;
		height: 68upx;
	}

	.white {
		color: #FFFFFF;
	}

	.black {
		color: #1C1C1E;
	}

	.active {
		background: #FF9B3F;
		color: #FFFFFF;
	}
	.activeText {
		color: #FFFFFF!important;
	}
</style>
